
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tiaoshi"></use>
                    </svg>
                    <div class="name">调试</div>
                    <div class="fontclass">#el-icon-tiaoshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-changjingguanli"></use>
                    </svg>
                    <div class="name">场景管理</div>
                    <div class="fontclass">#el-icon-changjingguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fenxiangfangshi"></use>
                    </svg>
                    <div class="name">分享方式</div>
                    <div class="fontclass">#el-icon-fenxiangfangshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#el-icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-guanfangbanben"></use>
                    </svg>
                    <div class="name">官方版本</div>
                    <div class="fontclass">#el-icon-guanfangbanben</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-gongnengdingyi"></use>
                    </svg>
                    <div class="name">功能定义</div>
                    <div class="fontclass">#el-icon-gongnengdingyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-jishufuwu"></use>
                    </svg>
                    <div class="name">技术服务</div>
                    <div class="fontclass">#el-icon-jishufuwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-hezuohuobanmiyueguanli"></use>
                    </svg>
                    <div class="name">合作伙伴密钥管理</div>
                    <div class="fontclass">#el-icon-hezuohuobanmiyueguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-ceshishenqing"></use>
                    </svg>
                    <div class="name">测试申请</div>
                    <div class="fontclass">#el-icon-ceshishenqing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-jinggao"></use>
                    </svg>
                    <div class="name">警告</div>
                    <div class="fontclass">#el-icon-jinggao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-peiwangyindao"></use>
                    </svg>
                    <div class="name">配网引导</div>
                    <div class="fontclass">#el-icon-peiwangyindao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-renjijiaohu"></use>
                    </svg>
                    <div class="name">人机交互</div>
                    <div class="fontclass">#el-icon-renjijiaohu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shiyongwendang"></use>
                    </svg>
                    <div class="name">使用文档</div>
                    <div class="fontclass">#el-icon-shiyongwendang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shebeikaifa"></use>
                    </svg>
                    <div class="name">设备开发</div>
                    <div class="fontclass">#el-icon-shebeikaifa</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-quanxianshenpi"></use>
                    </svg>
                    <div class="name">权限审批</div>
                    <div class="fontclass">#el-icon-quanxianshenpi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tianshenpi"></use>
                    </svg>
                    <div class="name">提案审批</div>
                    <div class="fontclass">#el-icon-tianshenpi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shujukanban"></use>
                    </svg>
                    <div class="name">数据看板</div>
                    <div class="fontclass">#el-icon-shujukanban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yingyongguanli"></use>
                    </svg>
                    <div class="name">应用管理</div>
                    <div class="fontclass">#el-icon-yingyongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yibiaopan"></use>
                    </svg>
                    <div class="name">仪表盘</div>
                    <div class="fontclass">#el-icon-yibiaopan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zhanghaoquanxianguanli"></use>
                    </svg>
                    <div class="name">账号权限管理</div>
                    <div class="fontclass">#el-icon-zhanghaoquanxianguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-guanbi"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#el-icon-guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zidingyi"></use>
                    </svg>
                    <div class="name">自定义</div>
                    <div class="fontclass">#el-icon-zidingyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xiajiantou"></use>
                    </svg>
                    <div class="name">下箭头</div>
                    <div class="fontclass">#el-icon-xiajiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shangjiantou"></use>
                    </svg>
                    <div class="name">上箭头</div>
                    <div class="fontclass">#el-icon-shangjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_loading"></use>
                    </svg>
                    <div class="name">icon_loading</div>
                    <div class="fontclass">#el-icon-icon_loading</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_renwujincheng"></use>
                    </svg>
                    <div class="name">icon_任务进程</div>
                    <div class="fontclass">#el-icon-icon_renwujincheng</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_rukou"></use>
                    </svg>
                    <div class="name">icon_入口</div>
                    <div class="fontclass">#el-icon-icon_rukou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_yiwenkongxin"></use>
                    </svg>
                    <div class="name">icon_疑问空心</div>
                    <div class="fontclass">#el-icon-icon_yiwenkongxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_fabu"></use>
                    </svg>
                    <div class="name">icon_发布</div>
                    <div class="fontclass">#el-icon-icon_fabu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_tianjia"></use>
                    </svg>
                    <div class="name">icon_添加</div>
                    <div class="fontclass">#el-icon-icon_tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_yulan"></use>
                    </svg>
                    <div class="name">icon_预览</div>
                    <div class="fontclass">#el-icon-icon_yulan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_zhanghao"></use>
                    </svg>
                    <div class="name">icon_账号</div>
                    <div class="fontclass">#el-icon-icon_zhanghao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_wangye"></use>
                    </svg>
                    <div class="name">icon_网页</div>
                    <div class="fontclass">#el-icon-icon_wangye</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_shezhi"></use>
                    </svg>
                    <div class="name">icon_设置</div>
                    <div class="fontclass">#el-icon-icon_shezhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_baocun"></use>
                    </svg>
                    <div class="name">icon_保存</div>
                    <div class="fontclass">#el-icon-icon_baocun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-icon_yingyongguanli"></use>
                    </svg>
                    <div class="name">icon_应用管理</div>
                    <div class="fontclass">#el-icon-icon_yingyongguanli</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-biaodanzujian-biaoge"></use>
                    </svg>
                    <div class="name">表单组件-表格</div>
                    <div class="fontclass">#el-icon-biaodanzujian-biaoge</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tubiao-bingtu"></use>
                    </svg>
                    <div class="name">图表-饼图</div>
                    <div class="fontclass">#el-icon-tubiao-bingtu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tubiao-zhexiantu"></use>
                    </svg>
                    <div class="name">图表-折线图</div>
                    <div class="fontclass">#el-icon-tubiao-zhexiantu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xingzhuang-tupian"></use>
                    </svg>
                    <div class="name">形状-图片</div>
                    <div class="fontclass">#el-icon-xingzhuang-tupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xingzhuang-xingxing"></use>
                    </svg>
                    <div class="name">形状-星形</div>
                    <div class="fontclass">#el-icon-xingzhuang-xingxing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-dakai"></use>
                    </svg>
                    <div class="name">打开</div>
                    <div class="fontclass">#el-icon-dakai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yingwen"></use>
                    </svg>
                    <div class="name">英文</div>
                    <div class="fontclass">#el-icon-yingwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zhongwen"></use>
                    </svg>
                    <div class="name">中文</div>
                    <div class="fontclass">#el-icon-zhongwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-miwen"></use>
                    </svg>
                    <div class="name">密文</div>
                    <div class="fontclass">#el-icon-miwen</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xianhao"></use>
                    </svg>
                    <div class="name">显号</div>
                    <div class="fontclass">#el-icon-xianhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-kongxinduigou"></use>
                    </svg>
                    <div class="name">空心对勾</div>
                    <div class="fontclass">#el-icon-kongxinduigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-duigou"></use>
                    </svg>
                    <div class="name">对勾</div>
                    <div class="fontclass">#el-icon-duigou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xiayibu"></use>
                    </svg>
                    <div class="name">下一步</div>
                    <div class="fontclass">#el-icon-xiayibu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shangyibu"></use>
                    </svg>
                    <div class="name">上一步</div>
                    <div class="fontclass">#el-icon-shangyibu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-kongjianxuanzhong"></use>
                    </svg>
                    <div class="name">控件选中</div>
                    <div class="fontclass">#el-icon-kongjianxuanzhong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-kongjianweixuan"></use>
                    </svg>
                    <div class="name">控件未选</div>
                    <div class="fontclass">#el-icon-kongjianweixuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-kongjianyixuan"></use>
                    </svg>
                    <div class="name">控件已选</div>
                    <div class="fontclass">#el-icon-kongjianyixuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fangkuai"></use>
                    </svg>
                    <div class="name">方块+</div>
                    <div class="fontclass">#el-icon-fangkuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fangkuai-"></use>
                    </svg>
                    <div class="name">方块-</div>
                    <div class="fontclass">#el-icon-fangkuai-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shuaxin"></use>
                    </svg>
                    <div class="name">刷新</div>
                    <div class="fontclass">#el-icon-shuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-baocun"></use>
                    </svg>
                    <div class="name">保存</div>
                    <div class="fontclass">#el-icon-baocun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fabu"></use>
                    </svg>
                    <div class="name">发布</div>
                    <div class="fontclass">#el-icon-fabu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xiayibu1"></use>
                    </svg>
                    <div class="name">下一步</div>
                    <div class="fontclass">#el-icon-xiayibu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shangyibu1"></use>
                    </svg>
                    <div class="name">上一步</div>
                    <div class="fontclass">#el-icon-shangyibu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xiangxiazhanhang"></use>
                    </svg>
                    <div class="name">向下占行</div>
                    <div class="fontclass">#el-icon-xiangxiazhanhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xiangshangzhanhang"></use>
                    </svg>
                    <div class="name">向上占行</div>
                    <div class="fontclass">#el-icon-xiangshangzhanhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tupianjiazaishibai"></use>
                    </svg>
                    <div class="name">图片加载失败</div>
                    <div class="fontclass">#el-icon-tupianjiazaishibai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fuwudiqiu"></use>
                    </svg>
                    <div class="name">服务地球</div>
                    <div class="fontclass">#el-icon-fuwudiqiu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-suoxiao"></use>
                    </svg>
                    <div class="name">缩小</div>
                    <div class="fontclass">#el-icon-suoxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fangda"></use>
                    </svg>
                    <div class="name">放大</div>
                    <div class="fontclass">#el-icon-fangda</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-huanyuanhuabu"></use>
                    </svg>
                    <div class="name">还原画布</div>
                    <div class="fontclass">#el-icon-huanyuanhuabu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-quanping"></use>
                    </svg>
                    <div class="name">全屏</div>
                    <div class="fontclass">#el-icon-quanping</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-wenjianjia"></use>
                    </svg>
                    <div class="name">文件夹</div>
                    <div class="fontclass">#el-icon-wenjianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-BMP"></use>
                    </svg>
                    <div class="name">BMP</div>
                    <div class="fontclass">#el-icon-BMP</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-GIF"></use>
                    </svg>
                    <div class="name">GIF</div>
                    <div class="fontclass">#el-icon-GIF</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-JPG"></use>
                    </svg>
                    <div class="name">JPG</div>
                    <div class="fontclass">#el-icon-JPG</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-PNG"></use>
                    </svg>
                    <div class="name">PNG</div>
                    <div class="fontclass">#el-icon-PNG</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-gengduo"></use>
                    </svg>
                    <div class="name">更多</div>
                    <div class="fontclass">#el-icon-gengduo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yunduanxiazai"></use>
                    </svg>
                    <div class="name">云端下载</div>
                    <div class="fontclass">#el-icon-yunduanxiazai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yunduanshangchuan"></use>
                    </svg>
                    <div class="name">云端上传</div>
                    <div class="fontclass">#el-icon-yunduanshangchuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-dian"></use>
                    </svg>
                    <div class="name">点</div>
                    <div class="fontclass">#el-icon-dian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shebeizhuangtai"></use>
                    </svg>
                    <div class="name">设备状态</div>
                    <div class="fontclass">#el-icon-shebeizhuangtai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-sousuobianxiao"></use>
                    </svg>
                    <div class="name">搜索变小</div>
                    <div class="fontclass">#el-icon-sousuobianxiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-sousuofangda"></use>
                    </svg>
                    <div class="name">搜索放大</div>
                    <div class="fontclass">#el-icon-sousuofangda</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-dingwei"></use>
                    </svg>
                    <div class="name">定位</div>
                    <div class="fontclass">#el-icon-dingwei</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xiaoxitongzhi"></use>
                    </svg>
                    <div class="name">消息通知</div>
                    <div class="fontclass">#el-icon-xiaoxitongzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-youhui"></use>
                    </svg>
                    <div class="name">优惠</div>
                    <div class="fontclass">#el-icon-youhui</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-ditu-dibiao"></use>
                    </svg>
                    <div class="name">地图-地标</div>
                    <div class="fontclass">#el-icon-ditu-dibiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-ditu-tuding"></use>
                    </svg>
                    <div class="name">地图-图钉</div>
                    <div class="fontclass">#el-icon-ditu-tuding</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-ditu-xing"></use>
                    </svg>
                    <div class="name">地图-星</div>
                    <div class="fontclass">#el-icon-ditu-xing</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-chehuisekuai"></use>
                    </svg>
                    <div class="name">撤回色块</div>
                    <div class="fontclass">#el-icon-chehuisekuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shanchusekuai"></use>
                    </svg>
                    <div class="name">删除色块</div>
                    <div class="fontclass">#el-icon-shanchusekuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fabusekuai"></use>
                    </svg>
                    <div class="name">发布色块</div>
                    <div class="fontclass">#el-icon-fabusekuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xinhao"></use>
                    </svg>
                    <div class="name">信号</div>
                    <div class="fontclass">#el-icon-xinhao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-lanya"></use>
                    </svg>
                    <div class="name">蓝牙</div>
                    <div class="fontclass">#el-icon-lanya</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-Wi-Fi"></use>
                    </svg>
                    <div class="name">Wi-Fi</div>
                    <div class="fontclass">#el-icon-Wi-Fi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-chaxun"></use>
                    </svg>
                    <div class="name">查询</div>
                    <div class="fontclass">#el-icon-chaxun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-anquan"></use>
                    </svg>
                    <div class="name">安全</div>
                    <div class="fontclass">#el-icon-anquan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-wangguan"></use>
                    </svg>
                    <div class="name">网关</div>
                    <div class="fontclass">#el-icon-wangguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-chucun"></use>
                    </svg>
                    <div class="name">储存</div>
                    <div class="fontclass">#el-icon-chucun</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-wuguan"></use>
                    </svg>
                    <div class="name">AI</div>
                    <div class="fontclass">#el-icon-wuguan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yunduanshuaxin"></use>
                    </svg>
                    <div class="name">云端刷新</div>
                    <div class="fontclass">#el-icon-yunduanshuaxin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yunhang"></use>
                    </svg>
                    <div class="name">运行</div>
                    <div class="fontclass">#el-icon-yunhang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-luyouqi"></use>
                    </svg>
                    <div class="name">路由器</div>
                    <div class="fontclass">#el-icon-luyouqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-bug"></use>
                    </svg>
                    <div class="name">bug</div>
                    <div class="fontclass">#el-icon-bug</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zhexiantu"></use>
                    </svg>
                    <div class="name">折线图</div>
                    <div class="fontclass">#el-icon-zhexiantu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-js"></use>
                    </svg>
                    <div class="name">js</div>
                    <div class="fontclass">#el-icon-js</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zihangche"></use>
                    </svg>
                    <div class="name">自行车</div>
                    <div class="fontclass">#el-icon-zihangche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-mysql"></use>
                    </svg>
                    <div class="name">mysql</div>
                    <div class="fontclass">#el-icon-mysql</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-qiche"></use>
                    </svg>
                    <div class="name">汽车</div>
                    <div class="fontclass">#el-icon-qiche</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-chengshi"></use>
                    </svg>
                    <div class="name">城市</div>
                    <div class="fontclass">#el-icon-chengshi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tixingshixin"></use>
                    </svg>
                    <div class="name">告警实心</div>
                    <div class="fontclass">#el-icon-tixingshixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-chazuo"></use>
                    </svg>
                    <div class="name">插座</div>
                    <div class="fontclass">#el-icon-chazuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-wuxiandianbo"></use>
                    </svg>
                    <div class="name">无线电波</div>
                    <div class="fontclass">#el-icon-wuxiandianbo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#el-icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-bianjisekuai"></use>
                    </svg>
                    <div class="name">编辑色块</div>
                    <div class="fontclass">#el-icon-bianjisekuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tupiantianjia"></use>
                    </svg>
                    <div class="name">图片添加</div>
                    <div class="fontclass">#el-icon-tupiantianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-liebiaomoshi_kuai"></use>
                    </svg>
                    <div class="name">列表模式_块</div>
                    <div class="fontclass">#el-icon-liebiaomoshi_kuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-qiapianmoshi_kuai"></use>
                    </svg>
                    <div class="name">卡片模式_块</div>
                    <div class="fontclass">#el-icon-qiapianmoshi_kuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fenlan"></use>
                    </svg>
                    <div class="name">分栏</div>
                    <div class="fontclass">#el-icon-fenlan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-fengexian"></use>
                    </svg>
                    <div class="name">分割线</div>
                    <div class="fontclass">#el-icon-fengexian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-dianzan"></use>
                    </svg>
                    <div class="name">点赞</div>
                    <div class="fontclass">#el-icon-dianzan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-charulianjie"></use>
                    </svg>
                    <div class="name">插入链接</div>
                    <div class="fontclass">#el-icon-charulianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-charutupian"></use>
                    </svg>
                    <div class="name">插入图片</div>
                    <div class="fontclass">#el-icon-charutupian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-quxiaolianjie"></use>
                    </svg>
                    <div class="name">取消链接</div>
                    <div class="fontclass">#el-icon-quxiaolianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-wuxupailie"></use>
                    </svg>
                    <div class="name">无序排列</div>
                    <div class="fontclass">#el-icon-wuxupailie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-juzhongduiqi"></use>
                    </svg>
                    <div class="name">居中对齐</div>
                    <div class="fontclass">#el-icon-juzhongduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yinyong"></use>
                    </svg>
                    <div class="name">引用</div>
                    <div class="fontclass">#el-icon-yinyong</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-youxupailie"></use>
                    </svg>
                    <div class="name">有序排列</div>
                    <div class="fontclass">#el-icon-youxupailie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-youduiqi"></use>
                    </svg>
                    <div class="name">右对齐</div>
                    <div class="fontclass">#el-icon-youduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitidaima"></use>
                    </svg>
                    <div class="name">字体代码</div>
                    <div class="fontclass">#el-icon-zitidaima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-xiaolian"></use>
                    </svg>
                    <div class="name">笑脸</div>
                    <div class="fontclass">#el-icon-xiaolian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitijiacu"></use>
                    </svg>
                    <div class="name">字体加粗</div>
                    <div class="fontclass">#el-icon-zitijiacu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitishangbiao"></use>
                    </svg>
                    <div class="name">字体上标</div>
                    <div class="fontclass">#el-icon-zitishangbiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitibiaoti"></use>
                    </svg>
                    <div class="name">字体标题</div>
                    <div class="fontclass">#el-icon-zitibiaoti</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitixiahuaxian"></use>
                    </svg>
                    <div class="name">字体下划线</div>
                    <div class="fontclass">#el-icon-zitixiahuaxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitixieti"></use>
                    </svg>
                    <div class="name">字体斜体</div>
                    <div class="fontclass">#el-icon-zitixieti</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitiyanse"></use>
                    </svg>
                    <div class="name">字体颜色</div>
                    <div class="fontclass">#el-icon-zitiyanse</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zuoduiqi"></use>
                    </svg>
                    <div class="name">左对齐</div>
                    <div class="fontclass">#el-icon-zuoduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitiyulan"></use>
                    </svg>
                    <div class="name">字体预览</div>
                    <div class="fontclass">#el-icon-zitiyulan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zitixiabiao"></use>
                    </svg>
                    <div class="name">字体下标</div>
                    <div class="fontclass">#el-icon-zitixiabiao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zuoyouduiqi"></use>
                    </svg>
                    <div class="name">左右对齐</div>
                    <div class="fontclass">#el-icon-zuoyouduiqi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-tianxie"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#el-icon-tianxie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-yingjian"></use>
                    </svg>
                    <div class="name">硬件</div>
                    <div class="fontclass">#el-icon-yingjian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-dianzan_kuai"></use>
                    </svg>
                    <div class="name">点赞_块</div>
                    <div class="fontclass">#el-icon-dianzan_kuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-zhihuan"></use>
                    </svg>
                    <div class="name">置换</div>
                    <div class="fontclass">#el-icon-zhihuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-duigoux"></use>
                    </svg>
                    <div class="name">对勾</div>
                    <div class="fontclass">#el-icon-duigoux</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-guanbi1"></use>
                    </svg>
                    <div class="name">关闭</div>
                    <div class="fontclass">#el-icon-guanbi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-aixin_shixin"></use>
                    </svg>
                    <div class="name">爱心 _实心</div>
                    <div class="fontclass">#el-icon-aixin_shixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-aixin"></use>
                    </svg>
                    <div class="name">爱心</div>
                    <div class="fontclass">#el-icon-aixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shexiangtou_shiti"></use>
                    </svg>
                    <div class="name">摄像头_实体</div>
                    <div class="fontclass">#el-icon-shexiangtou_shiti</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shexiangtou_guanbi"></use>
                    </svg>
                    <div class="name">摄像头_关闭</div>
                    <div class="fontclass">#el-icon-shexiangtou_guanbi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shexiangtou"></use>
                    </svg>
                    <div class="name">摄像头</div>
                    <div class="fontclass">#el-icon-shexiangtou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shengyin_shiti"></use>
                    </svg>
                    <div class="name">声音_实体</div>
                    <div class="fontclass">#el-icon-shengyin_shiti</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shengyinkai"></use>
                    </svg>
                    <div class="name">声音开</div>
                    <div class="fontclass">#el-icon-shengyinkai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shoucang_shixin"></use>
                    </svg>
                    <div class="name">收藏_实心</div>
                    <div class="fontclass">#el-icon-shoucang_shixin</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shoucang"></use>
                    </svg>
                    <div class="name">收藏</div>
                    <div class="fontclass">#el-icon-shoucang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shengyinwu"></use>
                    </svg>
                    <div class="name">声音无</div>
                    <div class="fontclass">#el-icon-shengyinwu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#el-icon-shengyinjingyin"></use>
                    </svg>
                    <div class="name">声音静音</div>
                    <div class="fontclass">#el-icon-shengyinjingyin</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#el-icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
